<template>
  <div class="write-offRecords background" :style="{height: `${screenHeight}px`}">
      <div  class="write-offRecords-head">已核销 <span style="color:red">{{writeNum}}</span> 张<span>{{userName}}，欢迎您~</span> </div>
      <mt-loadmore
      ref="loadmore"
      :bottom-method="loadBottom" 
      :bottomDistance="10"
      :autoFill="false"
      bottomDropText=""
      bottomLoadingText=""
      :bottom-all-loaded="allLoaded">
        <ul>
          <li class="write-offRecords-content" v-for="item in writeList" :key="item.id">
            <ul>
              <img class="write-offRecords-content-img" src="@/assets/img/hx/yhx@2x.png">
              <li>核 销 员：{{item.registrationWriter.userName || ''}}</li>
              <li>用户手机号：{{item.registrationUser.mobile}}</li>
              <li>报名活动名称：{{item.registration.title}}</li>
              <li>核销时间：{{item.registrationWriter.createTime}}</li>
            </ul>
          </li>
          <li style="text-align:center">
            <span style="font-size:12px;color:#bbb;position:relative;top:-5px;" v-if="!allLoaded && writeList">上拉加载更多↑</span>
            <span style="font-size:12px;color:#bbb;position:relative;top:-5px;" v-if="allLoaded && writeList.length>5">—— 你触及到我的底线啦~ ——</span>
          </li>
        </ul>
      </mt-loadmore>
  </div>
</template>

<script>
import { getWriteList,getWriteListNum } from '@/api/request.js';
import { setStore,getStore } from '@/assets/js/utils.js';
import { Loadmore } from 'mint-ui';

export default {
  name: 'write-offRecords',
  data() {
    return {
      allLoaded:false, //是否加载更多
      id:'',
      userName:'',
      writeNum:0,
      pageNo:1,
      writeList:[]
    }
  },
  computed: {
      screenHeight () {
        return window.innerHeight-40;
      }
  },
  created(){
    let userId = getStore('userId');
    if(!userId){
      //跳转登录
      var fhUrl = window.location.href;
      setStore('fhUrl', fhUrl);
      this.$router.push('/wxLogin')
    }
    let hxUser = getStore('hxUser');
    if(hxUser && hxUser.id){
      this.id = hxUser.id;
      this.userName = hxUser.userName;
      this._getWriteListNum();
      this.loadBottom();
    }else{
      this.$Toast('权限异常,请重新登录')
      setTimeout(() => {
          this.$router.push('/login')
      }, 1000)
    }
  },
  mounted() {
    this.$store.commit('UPDATE_PAGE_TITLE', '核销记录');
    this.$store.commit('UPDATE_HEAD', true)
    this.$store.commit('UPDATE_FOOTER', false)
  },
  methods: {
    loadBottom(){
      let that = this;
      getWriteList(this.id,this.pageNo).then(res => {
        if (res.code == 1) {
          that.pageNo++;
          that.writeList.push.apply(that.writeList,res.data);
          if(res.data.length<10){
            that.allLoaded = true; // 数据已全部获取完毕
          }
        }
        that.$refs.loadmore.onBottomLoaded();
      }).catch(err => console.log(err))
    },
    _getWriteListNum(){
      let that = this;
      getWriteListNum(this.id).then(res => {
        if (res.code == 1) {
          that.writeNum = res.data;
        }   
      }).catch(err => console.log(err))
    }
  },
  components: {
    "mt-loadmore":Loadmore
  }
}
</script>
<style scoped lang="scss">
.write-offRecords{
  overflow:scroll;
  text-align: left;
  margin-top: 40px;
  &-head{
    background-color: white;
    padding: 10px;
    // text-align: center;
    span:nth-child(2){
      color: #FFBE00;
      float: right;
      font-size: 12px;
    }
  }
  &-content{
    background-color: white;
    border-radius: 10px;
    margin: 5px 10px;
    position: relative;
    padding: 5px 10px;
    ul li{
      list-style: none;
      margin: 5px 0px;
    }
    &-img{
      width:60px;
      position: absolute;
      right: 10px;
      top:10px;
    }
  }
}
</style>
